<template>
	<div id="cart_footer_container">
		<div id="select_all">
			<Radio @change="toggleSelectAll" :checked="isSelectedAll"></Radio>
			<span class="c-txt">全选</span>
		</div>
		<div id="normal_state" class="fr" v-show="status === 'normal'">
			<div id="total_container" class="vertical">
				<p class="c-txt">
					合计：￥<span class="colored">{{totalPrice}}</span>
				</p>
				<p v-show="totalPrice > 0">
					<Bonus :bonus="totalBonus">{{totalBonus}}</Bonus>
				</p>
			</div>
			<div id="check" @click="goPay">结算</div>
		</div>
		<div id="edit_state" class="fr" v-show="status === 'edit'">
			<span class="c-btn" style="margin-right:.2rem"
			@click="collectGoods">移入收藏夹</span>
			<span class="c-btn highlight"
			@click="removeGoods">删除</span>
		</div>
	</div>
</template>
<script>
import Radio from '@/components/Radio'
import Bonus from '@/components/Bonus'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default{
	name:'CartFooter',
	computed:{
		...mapGetters({
			selectedGoodsId: 'cart/selectedGoodsId',
			isSelectedAll: 'cart/isSelectedAll',
			totalPrice: 'cart/totalPrice',
			totalBonus: 'cart/totalBonus',
			status: 'cart/status'
		}),
	},
	methods:{
		...mapActions({
			toggleSelectAll: 'cart/toggleSelectAll',
			collectGoods: 'cart/collectGoods',
			removeGoods: 'cart/removeGoods'
		}),
		goPay(){
			localStorage.setItem('selectedGoodsId', this.selectedGoodsId.toString())
			this.$router.push('/order/pay')
		}
	},
	props:[],
	components: {Radio, Bonus}
}
</script>
<style lang='less' scoped>
	.c-txt{
		font-size: .4rem;
	}
	#cart_footer_container{
		height: 1.5rem;
		width: 100%;
		position: fixed;
		bottom: 1.33rem;
		left: 0;
		padding: 0 .2rem;
		border-top: 1px solid #bbb;
		background: #fff;
	}
	#select_all{
		line-height: 1.5rem;
		float: left;
		.c-txt{
			vertical-align: middle;
			margin-left: .2rem;
		}
	}
	#normal_state,#edit_state,#check{
		vertical-align: middle;
		height: 100%;
		display: inline-block;
	}
	#check{
		background: #fb4a4a;
		color: #fff;
		width: 2.5rem;
		text-align: center;
		margin-left: .3rem;
		margin-right: -.2rem;
		line-height: 1.5rem;
		.c-txt
	}
	#edit_state{
		display: flex;
		justify-content: space-between;
	}
	.c-btn{
		width: 2.13rem;
		height: .85rem;
		line-height: .85rem;
		margin: auto;
	}
</style>